<template>
	<view class="p-top20" :style="{'--color': color}">
		<view class="shops">
			<image :src="$imgUrls(pageData.logo)" mode="aspectFill" class="logo f-shrink-0"></image>
			<view class="content">
				<view class="d-flex">
					<view class="bussName" v-if="pageData.bussName">{{pageData.bussName}}</view>
					<text class="color_33 size28">{{pageData.name}}</text>
				</view>
				<text class="color_33 h6 m-top10" v-if="pageData.address">{{pageData.address}}</text>
				<view class="Numall ">
					<view class="list">
						<text class="Num">{{pageData.orderCount}}</text>
						<text class="Num_name">总单量</text>
					</view>
					<view class="list">
						<text class="Num">{{pageData.payment}}</text>
						<text class="Num_name">交易额</text>
					</view>
					<view class="list">
						<text class="Num">{{pageData.work_num}}</text>
						<text class="Num_name">员工数</text>
					</view>
					<view class="list">
						<text class="Num">{{pageData.guest_num}}</text>
						<text class="Num_name">客户数</text>
					</view>
				</view>
			</view>
		</view>

		<view class="viewbox auto d-flex j-end  p-top20 p-bot20">
			<view class="d-flex a-center"  @click.stop="show = true">
				<text class="size30 color_33 m-right10">{{yearMonth}}</text>
				<view class="iconfont icon-xiasanjiaoxing color_33 size28"></view>
			</view>
		</view>

		<view class="Navs">
			<text class="NavNum">{{orderData.month}}</text>
			<text class="white size26">当月收入 ￥{{orderData.money}}</text>
		</view>

		<view class="viewbox auto" v-for="(item,index) in orderData.distributions" :key="index">
			<view class="Time">{{item.time}}</view>
			<view class="order_list" v-for="(sItem,sIndex) in item.list" :key="sIndex">
				<view class="flex-1 d-flex f-column">
					<text class="lititle">订单号：{{sItem.order_code}}</text>
					<text class="lititle">金额：￥{{sItem.total_money}}</text>
					<text class="lititle">店铺：{{sItem.store_name}}</text>
					<text class="lititle">下单时间：{{sItem.add_date}}</text>
				</view>
				<view class="d-flex f-column a-center">
					<text class="color size26">收益</text>
					<text class="color_ff2 size30 m-top8">￥{{sItem.money}}</text>
				</view>
			</view>
		</view>
		
		<emptys v-if="!orderData.distributions" title="暂无相关信息"></emptys>
		<u-datetime-picker :show="show" v-model="value1" :maxDate="Date.now()"
		                   mode="year-month" @cancel="show = false" @confirm="confirm">
		</u-datetime-picker>
	</view>
</template>


<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				shop_id: '',
				pageData: '',
				show:false,
				value1: Number(new Date()),
				yearMonth:'',
				orderData:''
			}
		},
		onLoad(opt) {
			if (opt.shop_id) this.shop_id = opt.shop_id
			this.getDealerShopDetail()
		},
		onShow() {
			const date = new Date()
			const year = date.getFullYear()
			const month = (date.getMonth()+1).toString().padStart(2,'0')
			this.yearMonth = `${year}.${month}`
			console.log(year,month);
			this.getDealerIncome(year,month);
		},
		methods: {
			getDealerShopDetail() {
				this.$http.get({
					url: '/WokersApi/getDealerShopDetail',
					data: {
						shop_id: this.shop_id
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					const result = res.data
					this.pageData = result
				})
			},
			getDealerIncome(year,month){
				this.$http.get({
					url:'/WokersApi/getDealerIncome',
					data:{
						year,
						month,
						shop_id: this.shop_id
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg)
					const result = res.data
					this.orderData = result
				})
			},
			confirm(event){
				const val = event.value;
				const year_month = this.$pop.Timestamp(val)
				this.yearMonth = year_month
				const yearMonth = year_month.split('.')
				this.show = false
				this.getDealerIncome(yearMonth[0],yearMonth[1])
				console.log(yearMonth);
			}
		},
		computed: {
			...mapState(['color', 'position'])
		},
	}
</script>

<style lang="scss" scoped>
	.shops {
		width: 690rpx;
		margin: 0 auto;
		background-color: #f2f2f2;
		padding: 30rpx;
		display: flex;
		flex-wrap: nowrap;
		border-radius: 8rpx;
	}

	.logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 30rpx;

	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.bussName {
		background-color: var(--color);
		padding: 2rpx 10rpx;
		color: #fff;
		font-size: 22rpx;
		margin-right: 10rpx;
	}

	.Numall {
		width: 100%;
		display: flex;

		justify-content: space-between;
		margin-top: 10rpx;
	}

	.list {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.Num {
		font-size: 28rpx;
		color: #333;
	}

	.Num_name {
		font-size: 24rpx;
		color: #333;
		margin-top: 6rpx;
	}

	.Navs {
		width: 690rpx;
		height: 80rpx;
		background-color: #999999;
		margin: 0 auto;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.NavNum {
		font-size: 80rpx;
		font-weight: bold;
		margin-top: -75rpx;
	}

	.Time {
		display: inline-block;
		padding: 6rpx 20rpx;
		color: #000;
		font-size: 28rpx;
		font-weight: bold;
		background-color: #d7d7d7;
		margin-top: 20rpx;
	}

	.order_list {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.lititle {
		font-size: 26rpx;
		color: #333;
		padding: 4rpx 0;
	}
</style>